<template>
  <div class="wrapper wrapper-content">            
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>高管薪酬信息 列表</h5>
                    <div class="ibox-tools">              
                    </div>
                </div>
                <div class="ibox-content">
                    <a class="btn btn-info" :href='Axios.baseURI+URL.exportExSalary.url+"?token="+token'>
                        <i class="fa fa-external-link"></i> 导出导入模板
                    </a>
                    
                    <el-upload
                         style='display:inline-block'
                        :action='URL.exSalaryImport.url'
                        :show-file-list='false'
                         :on-error='onError'  
                         :on-success='onSuccess'
                         :data='{token:token}'
                        >
                        <span class="btn btn-primary fileinput-button">
                        <i class="fa fa-sign-in"></i>
                        <a >从Excel批量导入</a>
                    </span>
                    </el-upload>
                    <div class='executive-salary-table'  v-if='t.code_name!=="未填写"' v-for='(t,c) in tableList' id="executive-salary-table" data-replace-inner="#executive-salary-table" data-url="/PSP/executiveSalary/_groupList" data-loading="wave">
                        <h3 >{{t.code_name}}</h3>
                        <table
                        
                            id="secondary-salary-table" 
                            class="table table-bordered table-condensed table-td-center"
                            
                            >
                            <thead>
                                <tr>
                                    <td rowspan="2">年度</td>
                                    <td rowspan="2">姓名</td>
                                    <td rowspan="2">岗位系数</td>
                                    <td rowspan="2">在岗天数</td>
                                    <td rowspan="2">岗位工资</td>
                                    <td rowspan="2">辅助工资</td>
                                    <td rowspan="2">调节工资</td>
                                    <td colspan="2">绩效奖金</td>
                                    <td colspan="2">年收入</td>
                                    <td rowspan="2">货币单位</td>
                                    <td rowspan="2">操作</td>
                                </tr>
                                <tr>
                                    <td>年度奖金</td>
                                    <td>递延奖金</td>
                                    <td>当期收入</td>
                                    <td>权责合计</td>
                                </tr>
                            </thead>
                            <tbody v-if='tableList'>
                                <template v-for='(k,i) in t.empclass'>
                                    <template v-for='(q,e) in k.empList'>
                                        <tr v-for='(w,m) in q.childs'>                            
                                            <td v-if='m==0' :rowspan='q.childs.length'>{{w.year}}</td>               
                                            <td style='padding:0 5px'>{{w.name}}({{w.payRollType}})</td>
                                            <td>{{w.jobCoefficient}}</td>
                                            <td>{{w.ondays}}</td>
                                            <td>{{w.monthlypostsalary}}</td>          
                                            <td>{{w.supplementarysalary}}</td>
                                            <td>{{w.adjustbonus}}</td>
                                            <td>{{w.monthlypostsalary}}</td>
                                            <td>{{w.deferredbonus}}</td>
                                            <td>{{w.annualIncome}}</td>
                                            <td>{{w.supplementarysalary}}</td>
                                            <td>{{w.monetaryunit}}</td>
                                            <td>
                                            <a @click.stop='bianji(w.id)' class="btn btn-sm btn-primary ajax" data-replace-inner="#modal1" data-modal="#modal1">
                                                <i class="fa fa-edit"></i> 编辑
                                            </a>
                                            <a @click.top='tableDelete(w.id)' class="btn btn-sm btn-danger ajax" data-method="DELETE" data-confirm="请确认！" data-refresh-list="#executive-salary-table">
                                                <i class="fa fa-remove"></i> 删除
                                            </a>
                                            </td>
                                        </tr>
                                </template>
                                    
                                    
                                   
                                </template>
                                     
                        </tbody>
                        </table>
                                    注：目标值根据个人岗位系数核算，不含KPI考核、二次分配等因素的影响</div>
                    </div>
                  
                
            </div>
        </div>
    </div>
     <el-dialog 
        title="编辑 高管薪酬信息"
        :visible.sync="dialogVisible"
        top='3vh'
        size='large'
        custom-class='executivePay-dialog'
        @open='openDialog'
        >

        <section class='dialog-content' style='padding-left:120px'>
            <el-form :model="form" :rules="rules" ref="executivePayForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="员工编号" prop="emplid">
                    <el-input v-model="form.emplid" style='width:60%'></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                    <el-input type="text" v-model="form.name" style='width:60%'></el-input>
                </el-form-item>
            
               
                <el-form-item label="年度" prop="year">
                    <el-input type="text" v-model="form.year" style='width:60%'></el-input>
                </el-form-item>

                 <el-form-item label="高管分类" prop="executiveClass">
                     <el-select v-model="form.executiveClass" placeholder="请选择">
                        <el-option v-for='(k,i) in cxoType' :value="k.code_name"></el-option>
                    </el-select>
                </el-form-item>

                 <el-form-item label="薪酬值类型" prop="payRollType">
                     <el-select v-model="form.payRollType" placeholder="请选择">
                         <el-option v-for='(k,i) in payType' :value="k.code_name"></el-option>
                    </el-select>
                </el-form-item>


                 <el-form-item label="岗位系数" prop="jobCoefficient">
                    <el-input type="text" v-model="form.jobCoefficient" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="薪级" prop="salarylevel">
                    <el-input type="text" v-model="form.salarylevel" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="在岗天数" prop="ondays">
                    <el-input type="text" v-model="form.ondays" style='width:60%'></el-input>
                </el-form-item>



                 <el-form-item label="岗位工资/月" prop="monthlypostsalary">
                    <el-input type="text" v-model="form.monthlypostsalary" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="岗位工资/年" prop="annualpostsalary">
                    <el-input type="text" v-model="form.annualpostsalary" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="辅助工资" prop="supplementarysalary">
                    <el-input type="text" v-model="form.supplementarysalary" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="调节工资" prop="adjustbonus">
                    <el-input type="text" v-model="form.adjustbonus" style='width:60%'></el-input>
                </el-form-item>



                 <el-form-item label="年度奖金" prop="annualbonus">
                    <el-input type="text" v-model="form.annualbonus" style='width:60%'></el-input>
                </el-form-item>


                 <el-form-item label="递延奖金" prop="deferredbonus">
                    <el-input type="text" v-model="form.deferredbonus" style='width:60%'></el-input>
                </el-form-item>
                    <el-form-item label="当期收入" prop="currentrevenue">
                    <el-input type="text" v-model="form.currentrevenue" style='width:60%'></el-input>
                </el-form-item>
                    <el-form-item label="权责合计" prop="accrualtotal">
                    <el-input type="text" v-model="form.accrualtotal" style='width:60%'></el-input>
                </el-form-item>
                    <el-form-item label="年收入" prop="annualIncome">
                    <el-input type="text" v-model="form.annualIncome" style='width:60%'></el-input>
                </el-form-item>
                    <el-form-item label="货币单位" prop="monetaryunit">
                    <el-input type="text" v-model="form.monetaryunit" style='width:60%'></el-input>
                </el-form-item>
             
                   </el-form-item>
                   
                </el-form> 

                

        </section>     
       
        <span slot='footer' class='dialog-footer'>
             <el-button type='primary' @click.stop='save'>更新</el-button>
             <el-button @click.stop='dialogVisible=false'>取 消</el-button>
        </span>

    </el-dialog>
</div>
</template>
<script>
import Vue from 'vue'
import {Dialog,Row,Col,Form,FormItem,Select,Option,Notification,MessageBox,Message,Upload} from 'element-ui'
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Option) 
Vue.use(Upload) 
export default {

    data () {
        return {
            tableList:null,
            dialogVisible:false,
            id:null,
            form:{},
            rules: {
              
                emplid: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                year: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                executiveClass: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                payRollType: [
                    { required: true, message: '请至少选择一个活动性质', trigger: 'blur' }
                ],
                ondays: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                annualbonus: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                annualpostsalary: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ],
                monetaryunit: [
                    { required: true, message: '该项不能为空', trigger: 'blur' }
                ]
             },
             cxoType:null,
             payType:null,
             token:null
       
       }
    },
    methods: {
      
        onSuccess(res){
            console.log(res)
            if(res.status == 0) {
                Notification({
                title: res.message,
                    type: 'error',
                    offset: '1'
                })
            }else {
                Notification({
                title: res.message,
                type: 'success',
                offset: '1'
            })
            }
            
        },
        onError(){
            Notification({
                title: '导入失败',
                type: 'error',
                offset: '1'
            })
        },
    tableDelete(id) {
       
        MessageBox.confirm('确定删除?', '提示', {

          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'

        }).then(() => {

             let params = {
                id:id+''
            }

            this.Axios
            .Post(this.URL.deleteExSalary.url,params)
            .then((res)=>{
                if (res.data.status==1) {
                    this.sendAjax()
                    Notification({
                        title: '删除成功',
                        type: 'success',
                        offset: '1'
                    })
                    
                } else {
                    Notification({
                        title: '删除失败,请重试',
                        type: 'error',
                        offset: '1'
                    })
                }
            })
          
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        
        
    },
       openDialog(){
           let params = {
               id:this.id+''
           }

           this.Axios
            .Post(this.URL.queryExSalaryDetails.url,params)
            .then((res)=>{
                this.form = res.data.datas.exSalaryDetails || ''
                this.cxoType = res.data.datas.executiveClass || ''
                this.payType = res.data.datas.payrollType || ''
            })
       },
       bianji(id){
           this.dialogVisible=true
           this.id=id
       },
       
       save() {

        this.$refs['executivePayForm'].validate((valid) => {

          if (valid) {

              let exSalary = this.form
               exSalary.payroll_type = exSalary.payroll_type =='未填写'?'':exSalary.payroll_type
               exSalary.executiveClass = exSalary.executiveClass =='未填写'?'':exSalary.executiveClass
         
            this.Axios
                .Post(this.URL.updateExSalary.url,exSalary)
                .then((res)=>{
               
                    if (res.data.status==1) {
                        this.sendAjax()
                        Notification({
                            title: '更新成功',
                            type: 'success',
                            offset: '1'
                        })
                       
                    } else {
                        Notification({
                            title: '更新失败',
                            type: 'error',
                            offset: '1'
                        })
                    }
                })

                this.dialogVisible = false
          } 
        })
      },

      sendAjax(){
        this.Axios
            .Post(this.URL.getExSalaryList.url)
            .then((res)=>{
                this.tableList = res.data.datas
            })
      }
    },

    created () {
        this.token = localStorage.getItem('token') || ''
        this.sendAjax()
    }
}
</script>
<style lang='less'>
.executivePay-dialog {
  width: 65% !important;
}


.wrapper .el-upload__input{
	display: none;
}

.wrapper.wrapper-content{
  padding: 20px 30px 40px !important;
  .executive-salary-table {
    margin-bottom:100px;
    margin-top:20px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
  font-weight: 600;
}
.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.ibox-content {
  clear: both;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.float-e-margins .btn {
  margin-bottom: 5px;
}
.btn-info {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #ffffff;
}
.btn {
  border-radius: 3px;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
a {
  text-decoration: none;
}
/* .btn-danger:hover{
    background-color: #ec4758;
    border-color: #ec4758;
    color: #FFFFFF;
} */
.btn-danger {
  background-color: #ec4758;
  border-color: #ec4758;
  color: #ffffff;
}
.float-e-margins .btn {
  margin-bottom: 5px;
}
.fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #ffffff;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h3 {
  margin-top: 5px;
  font-weight: 600;
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
}
/* table */
.table-bordered {
  border: 1px solid #ebebeb;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
table {
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
}
.table > thead > tr > td {
  line-height: 1.42857;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.table-bordered > thead > tr > td {
  border: 1px solid #e7e7e7;
  background-color: #f5f5f6;
}
.table > thead > tr > td {
  border: 1px solid #e7e7e7;
  background-color: #f5f5f6;
}
/* tbody */
.table > tbody > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: top;
  text-align: center;
  vertical-align: middle;
}
.table-bordered > tbody > tr > td {
  border: 1px solid #e7e7e7;
}  
}

</style>
